<nz-card>
  <p class="edit-title">
    基础信息
  </p>
  <div class="edit-control">
    <nz-form-item *ngIf="routeParams.id">
      <nz-form-label [nzFlex]="flexLabelWidth">入库单号</nz-form-label>
      <nz-form-control nzFlex="400px">
        <input
          nz-input
          disabled
          placeholder="入库单号"
          [(ngModel)]="detailsData.warehousingNumber"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>采购单号</nz-form-label>
      <nz-form-control nzFlex="1">
        <nz-select
          style="width: 400px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="请选择采购单号"
          [nzDisabled]="routeParams.id"
          [(ngModel)]="formParams.purchaseNumber"
          (ngModelChange)="purchaseChange($event)">
          <nz-option
            *ngFor="let option of purchaseOptions"
            [nzLabel]="option.purchaseNumber"
            [nzValue]="option.purchaseNumber"
          ></nz-option>
        </nz-select>

        <span style="color: #909399;" class="p-l-8">重新选择以后，采购内容会被清空</span>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>供应商</nz-form-label>
      <nz-form-control nzFlex="400px">
        {{ supplierName }}
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>入库仓库</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-select
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="请选择入库仓库"
          [(ngModel)]="formParams.whPutId">
          <nz-option
            *ngFor="let option of warehouseOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>入库品质</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.quality">
          <label nz-radio [nzValue]="1">良品</label>
          <label nz-radio [nzValue]="0">不良品</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth">预计到货日期</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-date-picker
          style="width: 200px;"
          [(ngModel)]="formParams.arrivalTime"
          (ngModelChange)="timeChange($event)"
        ></nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth">附件</nz-form-label>
      <nz-form-control nzFlex="400px">
        <app-upload-files
          [limitSize]="5"
          [isArrayType]="false"
          [(ngModel)]="formParams.contractEnclosure"
        ></app-upload-files>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth">备注</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-textarea-count [nzMaxCharacterCount]="1000">
          <textarea
            rows="4"
            nz-input
            maxlength="1000"
            placeholder="仅内部可见"
            [(ngModel)]="formParams.remark"
          ></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="edit-title">
    入库明细
    <button
      nz-button
      nzType="primary"
      nzSize="small"
      class="m-l-10"
      [disabled]="!formParams.purchaseNumber"
      (click)="showMoreGoodsModal()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      选择更多商品
    </button>
  </p>
  <div class="edit-control">
    <nz-table
      #mxTable
      nzBordered
      nzSize="small"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzData]="detailedTableData">
      <thead>
        <tr>
          <th nzAlign="center" rowspan="2" nzWidth="70px">序号</th>
          <th nzAlign="center" colspan="4">商品信息</th>
          <th nzAlign="center" colspan="3">采购单信息</th>
          <th nzAlign="center" colspan="3">本次入库信息</th>
          <th nzAlign="center" rowspan="2">操作</th>
        </tr>
        <tr>
          <th nzAlign="center">商品状态</th>
          <th nzAlign="center">商品名称</th>
          <th nzAlign="center">商品编号</th>
          <th nzAlign="center">商品69码</th>
          <th nzAlign="center">采购数量</th>
          <th nzAlign="center">冻结数量</th>
          <th nzAlign="center">已入库数量</th>
          <th nzAlign="center"><span class="required-th-sp p-r-8">*</span>预计入库数量</th>
          <th nzAlign="center">入库单价</th>
          <th nzAlign="center">小计</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of mxTable.data; let index = index;">
          <!-- 序号 -->
          <td nzAlign="center">{{ index + 1 }}</td>
          <!-- 商品状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : '#67C23A'}">
              {{ data.whGoodsState === 0 ? '禁用' : (data.whGoodsState === 1 ? '启用' : '') }}
            </span>
          </td>
          <!-- 商品名称 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data.whGoodsName || '-' }}
            </span>
          </td>
          <!-- 商品编号 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data.whGoodsCode || '-' }}
            </span>
          </td>
          <!-- 69码 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data.whGoodsTwoCode || '-' }}
            </span>
          </td>
          <!-- 采购数量 -->
          <td nzAlign="center">{{ data.purchaseNumber || '0' }}</td>
          <!-- 冻结数量 -->
          <td nzAlign="center">{{ data.frozenNumber || '0' }}</td>
          <!-- 已入库数量 -->
          <td nzAlign="center">{{ data.stockNumber || '0' }}</td>
          <!-- * 预计入库数量 -->
          <td nzAlign="center">
            <nz-input-number
              [nzMin]="1"
              [nzMax]="setMxNumer(data)"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="data.number"
            ></nz-input-number>
          </td>
          <!-- 入库单价 -->
          <td nzAlign="right">{{ (data.price || 0) | number: '1.4-4' }}</td>
          <!-- 小计 -->
          <td nzAlign="right">{{ calcProduct(data.number, data.price) | number: '1.4-4' }}</td>
          <!-- 操作 -->
          <td nzAlign="center">
            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="deleteItem(data)">
              <i nz-icon nzType="delete" nzTheme="outline"></i>
            </button>
          </td>
        </tr>

        <tr
          *ngIf="detailedTableData?.length"
          style="background: #fafafa; font-weight: 600;">
          <td nzAlign="center" colSpan="5">合计</td>
          <!-- 采购数量 -->
          <td nzAlign="center">{{ calcSumTotal('purchaseNumber') }}</td>
          <!-- 冻结数量 -->
          <td nzAlign="center">{{ calcSumTotal('frozenNumber') }}</td>
          <!-- 已入库数量 -->
          <td nzAlign="center">{{ calcSumTotal('stockNumber') }}</td>
          <!-- 预计入库数量 -->
          <td nzAlign="center">{{ calcSumTotal('number') }}</td>
          <!-- 入库单价 -->
          <td nzAlign="right">{{ calcSumTotal('price') | number: '1.4-4' }}</td>
          <!-- 小计合计 -->
          <td nzAlign="right">{{ calcProductTotal() | number: '1.4-4' }}</td>
          <td nzAlign="center">-</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="submitData()"
    >保存</button>
    
    <button
      nz-button
      nzType="default"
      (click)="pageBack()"
    >返回</button>
  </div>
</nz-card>

<!-- S 选择商品 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="1200"
  [(nzVisible)]="isGoodVisible"
  [nzTitle]="'选择商品'"
  (nzOnCancel)="isGoodVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="good-modal-tp">
        <button
          nz-button
          nzType="primary"
          (click)="relationSelected()"
        >关联已选商品 {{ setOfCheckedId.size }}</button>
        <p class="modal-tip">仅显示对应采购单中的商品</p>
      </div>

      <div class="pagination-wrap-position p-t-15">
        <nz-table
          #spTable
          nzSize="small"
          nzTableLayout="fixed"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzLoadingDelay]="100"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzLoading]="goodTableParams.loading"
          [nzData]="goodTableParams.tableData"
          (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
        >
          <thead>
            <tr>
              <th
                nzWidth="50px"
                [(nzChecked)]="checked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="onAllChecked($event)"
              ></th>
              <th nzAlign="center">商品状态</th>
              <th nzAlign="center" nzWidth="220px">商品名称</th>
              <th nzAlign="center">商品编号</th>
              <th nzAlign="center">69码</th>
              <th nzAlign="center">采购行状态</th>
              <th nzAlign="center">采购数量</th>
              <th nzAlign="center">冻结数量</th>
              <th nzAlign="center">已入库数量</th>
            </tr>
          </thead>
  
          <tbody>
            <tr
              *ngFor="let data of spTable.data; let index = index;"
              [ngClass]="{'tr-bg-red': data?.lineState === 1}">
              <td
                [nzDisabled]="setGoodDisabled(data)"
                [nzChecked]="setOfCheckedId.has(data.whGoodsId)"
                (nzCheckedChange)="onItemChecked(data.whGoodsId, $event)"
              ></td>
              <!-- 商品状态 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : '#67C23A'}">
                  {{ data.whGoodsState === 0 ? '禁用' : (data.whGoodsState === 1 ? '启用' : '') }}
                </span>
              </td>
              <!-- 商品名称 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
                  {{ data.whGoodsName || '-' }}
                </span>
              </td>
              <!-- 商品编号 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
                  {{ data.whGoodsCode || '-' }}
                </span>
              </td>
              <!-- 69码 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
                  {{ data.whGoodsTwoCode || '-' }}
                </span>
              </td>
              <!-- 采购行状态 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data?.lineState === 0 ? '#67C23A' : '#F56C6C'}">
                  {{ data?.lineState === 0 ? '正常' : (data?.lineState === 1 ? '已作废' : '-') }}
                </span>
              </td>
              <!-- 采购数量 -->
              <td nzAlign="center">{{ data.purchaseNumber || '0' }}</td>
              <!-- 冻结数量 -->
              <td nzAlign="center">{{ data.frozenNumber || '0' }}</td>
              <!-- 已入库数量 -->
              <td nzAlign="center">{{ data.stockNumber || '0' }}</td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 选择商品 -->